AJAX Response

Web Development - জাভাস্ক্রিপ্ট (JavaScript) জাভাস্ক্রিপ্ট অ্যাজাক্স (JS AJAX) |
220
220

AJAX রেসপন্স হল সার্ভার থেকে পাঠানো ডেটা, যা একবার ব্রাউজারকে পাঠানো হলে তা ওয়েব পেজে ডাইনামিকভাবে প্রদর্শিত হতে পারে। AJAX রিকোয়েস্টে সার্ভার থেকে যে রেসপন্স পাওয়া যায়, তা সাধারণত JSON, XML, HTML বা সাধারণ টেক্সট ফরম্যাটে থাকে।

AJAX রেসপন্সের মাধ্যমে ওয়েব পেজটি পুনরায় লোড না করেই নতুন ডেটা লোড করে, যা ইউজার ইন্টারফেসকে দ্রুত এবং সিম্পল রাখে।


AJAX Response এর ধাপ

  1. রিকোয়েস্ট পাঠানো: যখন ইউজার কোনো অ্যাকশন নেয় (যেমন বোতামে ক্লিক করা), তখন একটি AJAX রিকোয়েস্ট পাঠানো হয়।
  2. সার্ভার প্রক্রিয়া: সার্ভার রিকোয়েস্ট প্রক্রিয়া করে এবং রেসপন্স প্রস্তুত করে।
  3. রেসপন্স গ্রহণ: সার্ভার থেকে রেসপন্স ব্রাউজারে ফেরত আসে এবং নির্দিষ্ট HTML উপাদানে প্রদর্শিত হয়।

AJAX Response উদাহরণ

GET Request এবং Response

// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();

// GET রিকোয়েস্ট সেট করা
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

// রেসপন্স পেলে এই ফাংশনটি চলবে
xhr.onload = function() {
    if (xhr.status === 200) {
        // JSON ফরম্যাটে রেসপন্স পেতে
        const data = JSON.parse(xhr.responseText);
        console.log(data);  // কনসোলে রেসপন্স দেখানো হবে
    } else {
        console.error('Error:', xhr.status);
    }
};

// রিকোয়েস্ট পাঠানো
xhr.send();

ব্যাখ্যা: এখানে একটি GET রিকোয়েস্ট করা হয়েছে এবং সার্ভারের রেসপন্স JSON ফরম্যাটে পাওয়া যাবে। রেসপন্স পাওয়া গেলে তা কনসোলে প্রদর্শিত হবে।


POST Request এবং Response

// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();

// POST রিকোয়েস্ট সেট করা
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);

// হেডার সেট করা
xhr.setRequestHeader('Content-Type', 'application/json');

// রেসপন্স পেলে এই ফাংশনটি চলবে
xhr.onload = function() {
    if (xhr.status === 201) {
        // JSON ফরম্যাটে রেসপন্স পেতে
        const data = JSON.parse(xhr.responseText);
        console.log('Data Posted:', data);  // কনসোলে রেসপন্স দেখানো হবে
    } else {
        console.error('Error:', xhr.status);
    }
};

// পাঠানো ডেটা
const postData = JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
});

// রিকোয়েস্ট পাঠানো
xhr.send(postData);

ব্যাখ্যা: এখানে একটি POST রিকোয়েস্ট পাঠানো হয়েছে এবং সার্ভার থেকে যে রেসপন্স আসবে, তা কনসোলে প্রদর্শিত হবে।


XMLHttpRequest - Response এর বিভিন্ন উপাদান

responseText

এটি সার্ভার থেকে প্রাপ্ত ডেটাকে টেক্সট ফরম্যাটে রিটার্ন করে।

Syntax:

let response = xhr.responseText;

responseJSON

যদি রেসপন্স JSON ফরম্যাটে থাকে, তাহলে এই প্রপার্টি স্বয়ংক্রিয়ভাবে ডেটাকে পার্স করে একটি জাভাস্ক্রিপ্ট অবজেক্ট রিটার্ন করে।

Syntax:

let jsonResponse = xhr.responseJSON;

status

এটি সার্ভারের রেসপন্স কোড রিটার্ন করে। সাধারণ HTTP স্ট্যাটাস কোড গুলি:

  • 200: সফল রিকোয়েস্ট
  • 201: সঠিকভাবে তৈরি করা হয়েছে (POST)
  • 400: খারাপ রিকোয়েস্ট
  • 404: পাতা পাওয়া যায়নি
  • 500: সার্ভার সাইড সমস্যা

Syntax:

let statusCode = xhr.status;

statusText

এই প্রপার্টি HTTP স্ট্যাটাস কোডের সাথে সম্পর্কিত স্ট্যাটাস মেসেজ রিটার্ন করে।

Syntax:

let statusText = xhr.statusText;

AJAX Response এর Handling

সঠিক রেসপন্স হ্যান্ডলিং

একটি সফল রেসপন্স প্রাপ্তি নিশ্চিত করতে নিচের মত কোড ব্যবহার করা হয়:

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // সঠিক রেসপন্স পাওয়া গেলে
        const responseData = JSON.parse(xhr.responseText);
        console.log('Data:', responseData);
    } else {
        // সঠিক রেসপন্স না পেলে
        console.error('Request failed with status:', xhr.status);
    }
};

Response Error Handling

রেসপন্সে কোনো সমস্যা হলে, যেমন সার্ভার রিফিউজ করেছে বা সময়সীমা পেরিয়ে গেছে, তখন onerror ইভেন্ট ব্যবহার করা যেতে পারে:

xhr.onerror = function() {
    console.error('Request failed');
};

AJAX Response এর সুবিধা

  1. ডাইনামিক কন্টেন্ট আপডেট: AJAX রেসপন্স ব্যবহার করে পেজ রিলোড ছাড়াই কন্টেন্ট আপডেট করা যায়।
  2. উন্নত ইউজার এক্সপেরিয়েন্স: পেজের নির্দিষ্ট অংশে ডেটা লোড হলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
  3. পেজ রিলোড ছাড়াই ডেটা আপডেট: সার্ভার থেকে আসা রেসপন্স দিয়ে পেজের নির্দিষ্ট অংশ দ্রুত আপডেট করা সম্ভব হয়।

সারাংশ

AJAX রেসপন্স হল সার্ভার থেকে প্রাপ্ত ডেটা যা ব্রাউজারে ফিরে আসে এবং ওয়েব পেজে প্রদর্শিত হয়। XMLHttpRequest ব্যবহার করে সার্ভারের রেসপন্সকে JSON, XML বা টেক্সট ফরম্যাটে পাওয়া যায় এবং তা ইউজার ইন্টারফেসে প্রদর্শিত হয়। AJAX রেসপন্সের মাধ্যমে ওয়েব পেজে ডাইনামিকভাবে ডেটা লোড করা সম্ভব হয়, যা অ্যাপ্লিকেশনকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।


অতিরিক্ত রিসোর্স

Content added By
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন
Promotion